<template>
	<section>
		<!--工具条-->
		<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
			<el-form :inline="true" :model="filters">
				<el-form-item label="跳转类型">
					<el-select v-model="filters.skipType" placeholder="请选择">
						<!--<el-option label="全部" value=""></el-option>-->
						<el-option label="无跳转" value="0"></el-option>
						<el-option label="商品" value="1"></el-option>
						<el-option label="网址" value="2"></el-option>
						<el-option label="活动" value="3"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="创建时间">
					<el-date-picker v-model="filters.startTime" type="datetime" placeholder="开始时间"></el-date-picker>
				</el-form-item>
				<el-form-item label="至">
					<el-date-picker v-model="filters.endTime" type="datetime" placeholder="结束时间"></el-date-picker>
				</el-form-item>

				<el-form-item>
					<el-button type="primary" v-on:click="getUsers(filters)">查询</el-button>
					<!--<el-button type="primary" @click="reset(filters)">重置</el-button>-->
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="handleAdd">新增</el-button>
				</el-form-item>
			</el-form>
		</el-col>

		<!--列表-->
		<el-table :data="users" highlight-current-row v-loading="listLoading" @selection-change="selsChange" stripe border>
			<el-table-column type="index" width="120" label="编号" align="center" >
			</el-table-column>
			<el-table-column prop="image" label="banner图片" width="270" align="center" >
				<template slot-scope="scope">
					<img :src="scope.row.image" width="60" height="40" align="center" />
				</template>
			</el-table-column>
			<el-table-column prop="skipType" label="跳转类型" width="200" align="center" >
				<template slot-scope="scope">
	            	<el-tag type="success" v-if="scope.row.skipType == 0 || scope.row.skipType == '无跳转'">无跳转</el-tag>
	                <el-tag type="success" v-if="scope.row.skipType == 1 || scope.row.skipType == '商品'">商品</el-tag>
	                <el-tag type="success" v-if="scope.row.skipType == 2 || scope.row.skipType == '网址'">网址</el-tag>
	                <el-tag type="success" v-if="scope.row.skipType == 3 || scope.row.skipType == '活动'">活动</el-tag>
            	</template>
			</el-table-column>
			<el-table-column prop="displayTime" label="定时显示时间"  width="280" align="center" >
				<template slot-scope="scope">
					<span>{{scope.row.displayTime | formatDate}} </span>
				</template>
			</el-table-column>
			<el-table-column prop="soldoutTime" label="定时下架时间"  width="280" align="center" >
				<template slot-scope="scope">
					<span>{{scope.row.soldoutTime | formatDate}} </span>
				</template>
			</el-table-column>
			<el-table-column prop="createTime" label="创建时间" width="280" align="center" >
				<template slot-scope="scope">
					<span>{{scope.row.createTime | formatDate}} </span>
				</template>
			</el-table-column>
			<el-table-column label="操作" width="200"align="center" >
				<template slot-scope="scope">
					<!--<el-button size="small" @click="handleEdit(scope.$index, scope.row)">查看</el-button>-->
					<el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
					<el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>

		<!--工具条-->
		<el-col :span="24" class="toolbar">
			<el-pagination
	          class="top"
	          @size-change="handleSizeChange"
	          @current-change="handleCurrentChange"
	          :current-page="currentPage"
	          :page-sizes="[10, 15, 20, 30]"
	          :page-size="pageSize"
	          layout="total, sizes, prev, pager, next, jumper"
	          :total='total'
	          style="float:right;">
	        </el-pagination>
		</el-col>

		<!--编辑界面-->
		<el-dialog title="详情" v-model="editFormVisible" :close-on-click-modal="false">
			<el-form :model="editForm" label-width="120px" :rules="editFormRules" ref="editForm">
				<div style="display: flex;flex-direction: row;">
					<el-form-item prop="skipType" label="跳转类型">
						<el-select v-model="editForm.skipType" placeholder="跳转类型" @change="change">
							<el-option label="无跳转" value="0"></el-option>
							<el-option label="商品" value="1"></el-option>
							<el-option label="网址" value="2"></el-option>
							<el-option label="活动" value="3"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item prop="skipMsg" label="">
						<el-input v-if="editForm.skipType == '商品' || editForm.skipType == '1'" v-model="editForm.skipMsg" placeholder="商品ID"></el-input>
						<el-input v-if="editForm.skipType == '网址' || editForm.skipType == '2'" v-model="editForm.skipMsg" placeholder="网址ID"></el-input>
						<el-input v-if="editForm.skipType == '活动' || editForm.skipType == '3'" v-model="editForm.skipMsg" placeholder="活动ID"></el-input>
					</el-form-item>
				</div>
				<el-form-item label="定时显示时间"prop="displayTime">
					<el-date-picker type="datetime" placeholder="选择日期" v-model="editForm.displayTime"></el-date-picker>
				</el-form-item>
				<el-form-item label="定时下架时间" prop="soldoutTime">
					<el-date-picker type="datetime" placeholder="选择日期" v-model="editForm.soldoutTime"></el-date-picker>
				</el-form-item>
				<el-form-item label="上传banner图片">
					<el-upload class="upload-demo" action="/file/upload"
							   name="file"
							   :data="fileType2"
							   :on-success="onSuccessUpdate"
							   :on-error="onErrorUpdate"
							   multiple
							   :limit="1"
							   list-type="picture-card"
							   :on-exceed="handleExceed"
							   :file-list="fileList2"
					>
						<el-button size="small" type="primary">点击上传</el-button>
						<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
					</el-upload>
				</el-form-item>
				<el-form-item label="图片预览" prop="imgUrl">
	              <el-card :body-style="{ padding: '0px' }">
	                <!--<div style="padding: 14px;">
					  <span>{{ editForm.imgUrl }}</span>
					</div>-->
	                <img :src="editForm.image" class="image">
	              </el-card>
               </el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="editFormVisible = false">取消</el-button>
				<el-button type="primary" @click.native="editSubmit" :loading="editLoading">提交</el-button>
			</div>
		</el-dialog>

		<!--新增界面-->
		<el-dialog title="新增" v-model="addFormVisible" :close-on-click-modal="false">
			<el-form :model="addForm" label-width="120px" :rules="addFormRules" ref="addForm">
				<div style="display: flex;flex-direction: row;">
					<el-form-item prop="skipType" label="跳转类型">
					<el-select v-model="addForm.skipType" placeholder="跳转类型">
						<el-option label="无跳转" value="0"></el-option>
						<el-option label="商品" value="1"></el-option>
						<el-option label="网址" value="2"></el-option>
						<el-option label="活动" value="3"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item prop="skipMsg" label="">
					<el-input v-if="addForm.skipType == '1'" v-model="addForm.skipMsg" placeholder="商品ID" ></el-input>
					<el-input v-if="addForm.skipType == '2'" v-model="addForm.skipMsg" placeholder="网址ID"></el-input>
					<el-input v-if="addForm.skipType == '3'" v-model="addForm.skipMsg" placeholder="活动ID"></el-input>
				</el-form-item>
				</div>
				<el-form-item label="定时显示时间" prop="displayTime">
					<el-date-picker type="datetime" placeholder="选择日期" v-model="addForm.displayTime"></el-date-picker>
				</el-form-item>
				<el-form-item label="定时下架时间" prop="soldoutTime">
					<el-date-picker type="datetime" placeholder="选择日期" v-model="addForm.soldoutTime"></el-date-picker>
				</el-form-item>
				<el-form-item label="上传banner图片">
					<el-upload class="upload-demo" action="/file/upload"
							   name="file"
							   :data="fileType1"
							   :on-success="onSuccess"
							   :on-error="onError"
							   multiple
							   :limit="1"
							   list-type="picture-card"
							   :on-exceed="handleExceed"
							   :file-list="fileList"
					>
						<el-button size="small" type="primary">点击上传</el-button>
						<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
					</el-upload>
				</el-form-item>
				<el-form-item label="图片成功地址" prop="image" v-show="false">
	              <el-input  v-model="addForm.image" auto-complete="off" placeholder="请输入url地址"></el-input>
	            </el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="addFormVisible = false">取消</el-button>
				<el-button type="primary" @click.native="addSubmit('addForm')" :loading="addLoading">提交</el-button>
			</div>
		</el-dialog>
	</section>
</template>

<script>
	import {formatDate} from '@/common/js/util';
	import { queryBanner ,addBanner,deleteBanner,updateBanner} from '../../api/api';


	export default {
		filters: {
            formatDate(time) {
                var date = new Date(time);
                return formatDate(date, 'yyyy-MM-dd hh:mm:ss');
            }
        },
		data() {
			return {
				addFormRules: {

		        },
				data:'',

				filters: {
					startTime: '',
					endTime:'',
					skipType:'',
					date: ''
				},
				start: '',
				end: '',
				filter:{
					skipType:'',
					skipMsg:'',
				},

				users: [],
				//分页
				total: 0,
				page: 1,
				pageSize:10,
				currentPage:1,
				listLoading: false,
				sels: [],//列表选中列

				editFormVisible: false,//编辑界面是否显示
				editLoading: false,
				editFormRules: {

				},
				//编辑界面数据
				editForm: {
					id: 0,
					skipType: '',
					displayTime: '',
					soldoutTime: '',
					image: '',
					skipMsg: '',
				},

				addFormVisible: false,//新增界面是否显示
				addLoading: false,
				//新增界面数据
				addForm: {
					skipType: '',
					skipMsg: '',
					displayTime: '',
					soldoutTime: '',
					image: '',
				},
				fileType1:{
		          "fileType" : "SUMMARY_EVENT"
		        },
		        fileList: [],
		        fileType2:{
		          "fileType" : "SUMMARY_EVENT"
		        },
		        fileList2: [],

			}
		},
		methods: {
			//重置
			reset(filters) {
		        this.$refs[filters].resetFields();
		   },
			onSuccess(response, file, fileList) {
		       this.addForm.image = file.response.body;
		       this.addForm.imgName = file.name;
		    },

			onError(response, file, fileList) {
		        this.$message({
		          showClose: true,
		          message: '图片上传失败！',
		          type: 'error'
		        });
		      },

		    handleExceed(files, fileList) {
		        this.$message.warning(`当前超出限制！本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
		    },
		    onSuccessUpdate(response, file, fileList) {
		        this.editForm.image = file.response.body;
		    },
		    onErrorUpdate(response, file, fileList){
		        this.$message({
		          showClose: true,
		          message: '图片上传失败！',
		          type: 'error'
		        });
		    },

			//分页
			handleCurrentChange(val) {
				this.page = val;
				this.getUsers();
			},
			handleSizeChange(val) {
		        this.pageSize = val;
		        this.getUsers();
		    },
			//获取用户列表
			getUsers() {
				let para = {
					page: this.page,
					pageIndex: this.page,
					pageSize: this.pageSize
				};
				if(!this.filters.skipType == '') {
				   para.skipType = this.filters.skipType
				}
				if(!this.filters.startTime == '') {
				   para.startTime = this.filters.startTime
				}
				if(!this.filters.endTime == '') {
				   para.endTime = this.filters.endTime
				}
				this.listLoading = true;
				//NProgress.start();
				queryBanner(para).then((res) => {

					this.total = res.data.totalCount;
					this.users = res.data.data;

					this.listLoading = false;
				});
			},
			//删除
			handleDel: function (index, row) {
				this.$confirm('确认删除该记录吗?', '提示', {
					type: 'warning'
				}).then(() => {
					this.listLoading = true;
					//NProgress.start();
					let para = { id: row.id };
					console.log(para);
					deleteBanner({ id: row.id }).then((res) => {
						this.listLoading = false;
						//NProgress.done();
						this.$message({
							message: '删除成功',
							type: 'success'
						});
						this.getUsers();
					});
				}).catch(() => {

				});
			},
			change() {
				this.editForm.skipMsg = ''
			},
			//显示编辑界面
			handleEdit: function (index, row) {
				this.editFormVisible = true;
				if(row.skipType==0){
					row.skipType = '无跳转';
				}
				if(row.skipType ==1){
					row.skipType = '商品';
				}
				if(row.skipType ==2){
					row.skipType = '网址';
				}
				if(row.skipType ==3){
					row.skipType = '活动';
				}
				this.editForm = Object.assign({}, row);
			},
			//显示新增界面
			handleAdd: function () {
				console.log(this.users)
				if(this.users.length<5){
					this.addFormVisible = true;
					this.addForm = {
						skipType: '',
						displayTime: '',
						soldoutTime: '',
						image: '',
						skipMsg:'',
					};
				}else{
					alert("最多添加五条banner")
				}

			},
			//编辑
			editSubmit: function (editForm) {
				this.$refs.editForm.validate((valid) => {
					if (valid) {
						this.$confirm('确认提交吗？', '提示', {}).then(() => {
							this.editLoading = true;
							//NProgress.start();
							switch(this.editForm.skipType) {
								case '无跳转':
									this.editForm.skipType = '0'
									break;
								case '商品':
									this.editForm.skipType = '1'
									break;
								case '网址':
									this.editForm.skipType = '2'
									break;
								case '活动':
									this.editForm.skipType = '3'
									break;
							}
							let para = Object.assign({}, this.editForm);
							updateBanner(para).then((res) => {
								this.editLoading = false;
								//NProgress.done();
								this.$message({
									message: '提交成功',
									type: 'success'
								});
								this.$refs['editForm'].resetFields();
								this.editFormVisible = false;
								this.getUsers();
							});
						});
					}
				});
			},
			//新增
			addSubmit(addForm) {
				this.$refs.addForm.validate((valid) => {
					if (valid) {
						this.$confirm('确认提交吗？', '提示', {}).then(() => {
							this.addLoading = true;
							let paras = Object.assign({}, this.addForm);
							console.log("添加==="+paras)
							var para = {skipMsg: this.addForm.skipMsg,skipType:this.addForm.skipType,displayTime:this.addForm.displayTime,soldoutTime:this.addForm.soldoutTime,image:this.addForm.image}
							addBanner(para).then((res) => {
								this.addLoading = false;
								this.$message({
									message: '提交成功',
									type: 'success'
								});
								this.$refs['addForm'].resetFields();
								this.addFormVisible = false;
								this.getUsers();
							});
						});
					}
				});
			},
			selsChange: function (sels) {
				this.sels = sels;
			},
			//批量删除
			batchRemove: function () {
				var ids = this.sels.map(item => item.id).toString();
				this.$confirm('确认删除选中记录吗？', '提示', {
					type: 'warning'
				}).then(() => {
					this.listLoading = true;
					//NProgress.start();
					let para = { ids: ids };
					batchRemoveUser(para).then((res) => {
						this.listLoading = false;
						//NProgress.done();
						this.$message({
							message: '删除成功',
							type: 'success'
						});
						this.getUsers();
					});
				}).catch(() => {

				});
			}
		},
		mounted() {
			this.getUsers();
		}
	}

</script>

<style scoped>

</style>
